<template>
    <el-row class="login-container">
        <el-col :lg="16" :md="12" class="login-left">
            <div>
                <div>欢迎回来~</div>
                <div>此网站是基于vue+vite开发的商城后台管理平台</div>
            </div>
        </el-col>
        <el-col :lg="8" :md="12" class="login-right">
            <h2 class="login-title">欢迎回来</h2>
            <div>
                <span class="line"></span>
                <span>请使用账号密码登录</span>
                <span class="line"></span>
            </div>
            <el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请输入账号/用户名">
                        <template #prefix>
                            <el-icon class="el-input_icon">
                                <user />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" show-password v-model="form.password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon class="el-input_icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button round color="#3b82f6" class="w-[250px]" type="primary" @click="onSubmit"
                        :loading="loading">登
                        录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script setup>
    import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    import { toast } from '~/composables/util'

    const store = useStore()
    const router = useRouter()

    // do not use same name with ref
    const form = reactive({
        username: "",
        password: "",
    })

    const rules = {
        username: [
            {
                required: true,
                message: '账号/用户名不能为空',
                trigger: 'blur'
            },
        ],
        password: [
            {
                required: true,
                message: '密码不能为空',
                trigger: 'blur'
            },
        ]
    }

    const formRef = ref(null)
    const loading = ref(false)

    const onSubmit = () => {
        formRef.value.validate((valid) => {
            if (!valid) {
                return false
            }
            loading.value = true

            store.dispatch("login", form).then(res => {
                toast("登录成功")
                router.push('/')
            }).finally(() => {
                loading.value = false
            })
        })
    }

    // 键盘监听事件
    function onKeyUp(e) {
        if (e.key == "Enter") onSubmit()
    }

    // 键盘监听
    onMounted(() => {
        document.addEventListener("keyup", onKeyUp)
    })

    // 移除键盘监听
    onBeforeUnmount(() => {
        document.removeEventListener("keyup", onKeyUp)
    })
</script>

<style scoped>
    .login-container {
        @apply min-h-screen bg-sky-500
    }

    .login-container .login-left, .login-container .login-right {
        @apply flex items-center justify-center
    }

    .login-container .login-right {
        @apply bg-light-50 flex-col
    }

    .login-left>div>div:first-child {
        @apply font-bold text-light-50 text-6xl mb-4
    }

    .login-left>div>div:second-child {
        @apply text-light-500 text-sm
    }

    .login-right .login-title {
        @apply font-bold text-gray-800 text-4xl
    }

    .login-right>div {
        @apply felx space-x-2 items-center justify-center my-5 text-gray-500
    }

    .login-right .line {
        @apply h-[2px] w-16 bg-gray-200
    }
</style>